<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>仿京东</title>
        <!--加载css样式-->
        <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <!--导入网页头小图标-->
    <link rel="shortcut icon" href="favicon.ico">
    <script type="text/javascript">
        window.onload = function(){
            var login = document.getElementById("login");
            var mask = document.getElementById("mask");
            var box = document.getElementById("box");

            login.onclick = function(){
                mask.style.display = "block";
                box.style.display= "block";
            }

            var close_login = document.getElementById("close-login");
            close_login.onclick = function(){
                mask.style.display = "none";
                box.style.display= "none";
            }
        }
    </script>
</head>
<body>
<!--登录遮罩-->
<div id="mask"></div>
<div id="box">
    <span id="close-login">x</span>
</div>
    <!--京东的头部导航-->
    <div class="shortcut">
        <div class="w">
            <div class="fl">
                <div class="dt">送至:北京
                <i><s>◇</s></i>
                </div>

            </div>
            <div class="fr">
                <ul>
                    <li>
                        <a href="javascript:;" id="login">你好，请登录</a>&nbsp;&nbsp;
                        <a href="#" class="col-red">免费注册</a>
                    </li>
                    <li class="line"></li>
                    <li class="fore">我的订单
                        <i><s>◇</s></i>
                    </li>
                    <li class="line"></li>
                    <li class="fore">我的京东
                        <i><s>◇</s></i>
                    </li>
                    <li class="line"></li>
                    <li>京东会员 </li>
                    <li class="line"></li>
                    <li>企业采购 </li>
                    <li class="line"></li>
                    <li class="fore tel-jd">
                        <em class="tel"></em>
                        手机京东
                        <i><s>◇</s></i>
                    </li>
                    <li class="line"></li>
                    <li class="fore">关注京东
                        <i><s>◇</s></i>
                    </li>
                    <li class="line"></li>
                    <li class="fore">客户服务
                        <i><s>◇</s></i>
                    </li>
                    <li class="line"></li>
                    <li class="fore">网站导航
                        <i><s>◇</s></i>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--京东的topBanner-->
    <div class="topbanner" id="top_banner">
        <div class="w tp">
            <img src="images/topbanner.jpg" alt="">
            <a href="javascript:;" class="close-banner" id="jd-close"></a>
        </div>
    </div>
    <script>
        //事件源:a 事件:点击 事件处理程序 topbanner隐藏/关闭
        //先找人
        var jd_close = document.getElementById("jd-close");
        var top_banner=document.getElementById("top_banner");
        jd_close.onclick = function(){
            top_banner.style.display = "none";
        }
    </script>
    <!--logo搜索栏部分-->
    <div class="w clearfix">
        <!--京东logo-->
        <div class="logo">
            <a href="http://www.jd.com" target="_blank" class="jd-a" title="叮咚">京东</a>
            <div class="db11">
                <a href="#"><img src="images/dong.gif" alt=""></a>
            </div>
        </div>
        <!--搜索栏-->
        <div class="search">
            <input type="text" name="" id="" value="图书开抢">
            <button>搜索</button>
        </div>
        <!--购物车-->
        <div class="car">
        <a>我的购物车</a>
            <span class="icon icon1"></span>
            <span class="icon icon2">></span>
            <span class="icon icon3">8</span>
        </div>
        <div class="hotwords">
            <a href="#" class="col-red">11月11天</a>
            <a href="#">11.11秒杀</a>
            <a href="#">买2免1</a>
            <a href="#">Note5 黑</a>
            <a href="#">12期免息</a>
            <a href="#">智能科技</a>
            <a href="#">清仓</a>
            <a href="#">国际服饰</a>
            <a href="#">优惠券</a>
        </div>
    </div>

    <!--nav部分-->
    <div class="jd-nav">
        <div class="w">
            <div class="dropdown">
                <div class="dt">
                    <a href="#">全部商品分类</a>
                </div>
                <div class="dd">
                    <div class="item2">
                        <h3>家用电器</h3>
                        <span>></span>
                    </div>
                    <div class="item2">
                        <h3>手机、数码、京东通信</h3>
                        <span>></span>
                    </div>
                    <div class="item2">
                        <h3>电脑、办公</h3>
                        <span>></span>
                    </div>
                    <div class="item2">
                        <h3>家居、家具、家装、厨具</h3>
                        <span>></span>
                    </div>
                    <div class="item2">
                        <h3>男装、女装、童装、内衣</h3>
                        <span>></span>
                    </div>
                    <div class="item2">
                        <h3>个护化妆、清洁用品、宠物</h3>
                        <span>></span>
                    </div>
                    <div class="item2">
                        <h3>鞋靴、箱包、珠宝、奢侈品</h3>
                        <span>></span>
                    </div>
                    <div class="item2">
                        <h3>运动户外、钟表</h3>
                        <span>></span>
                    </div>
                    <div class="item2">
                        <h3>汽车、汽车用品</h3>
                        <span>></span>
                    </div>
                    <div class="item2">
                        <h3>母婴、玩具乐器</h3>
                        <span>></span>
                    </div>
                    <div class="item2">
                        <h3>食品、酒类、生鲜、特产</h3>
                        <span>></span>
                    </div>
                    <div class="item2">
                        <h3>医药保健</h3>
                        <span>></span>
                    </div>
                    <div class="item2">
                        <h3>图书、音像、电子书</h3>
                        <span>></span>
                    </div>
                    <div class="item2">
                        <h3>彩票、旅行、充值、票务</h3>
                        <span>></span>
                    </div>
                    <div class="item2">
                        <h3>理财、众筹、白条、保险</h3>
                        <span>></span>
                    </div>
                </div>
            </div>
            <div class="navitiems">
                <ul>
                    <li  class="new"><a href="#">服装城</a></li>
                    <li><a href="#">美妆馆</a></li>
                    <li><a href="#">京东超市</a></li>
                    <li><a href="#">生鲜</a></li>
                    <li><a href="#">全球购</a></li>
                    <li><a href="#">闪购</a></li>
                    <li><a href="#">团购</a></li>
                    <li><a href="#">拍卖</a></li>
                    <li><a href="#">金融</a></li>
                </ul>
            </div>
            <div class="bike"></div>
        </div>
    </div>

    <!--大banner-->
    <div class="banner604">
        <a href="#">

        </a>
    </div>
    <div class="w main clearfix">
        <div class="slider">
            <!--轮播图-->
            <a href="#"><img src="images/slider1.jpg" alt=""></a>
            <ul class="circle">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
            <!--轮播按钮-->
            <div class="arrow">
                <a href="javascript:;" class="arrow-l"><</a>
                <a href="javascript:;" class="arrow-r">></a>
            </div>
        </div>
        <div class="news">
            <div class="jd-news">
                <div class="dt">
                    <h3>京东快报</h3>
                    <a href="#">更多 ></a>
                </div>
                <div class="dd">
                    <ul>
                        <li><a href=""><span>[特惠]</span>三星Tab Pro S 首发享六重好礼</a></li>
                        <li><a href=""><span>[公告]</span>丹寨馆百日庆 传承文化邀你赏</a></li>
                        <li><a href=""><span>[特惠]</span>购美赞为里约点赞 两件85折</a></li>
                        <li><a href=""><span>[公告]</span>京东美食地图·地方生鲜馆上线</a></li>
                        <li><a href=""><span>[特惠]</span>只为你赢！大牌尽享12期免息</a></li>
                    </ul>
                </div>
            </div>
            <div class="lifeservie">
                <div class="dt">
                    <h3>生活服务</h3>
                </div>
                <div class="dd" id="iconsprite">
                    <ul>
                        <li class="life-icon1"><a href="#"><i></i><span>话费</span></a></li>
                        <li class="life-icon1"><a href="#"><i></i><span>话费</span></a></li>
                        <li class="life-icon1"><a href="#"><i></i><span>话费</span></a></li>
                        <li class="life-icon1"><a href="#"><i></i><span>话费</span></a></li>
                        <li class="life-icon1"><a href="#"><i></i><span>话费</span></a></li>
                        <li class="life-icon1"><a href="#"><i></i><span>话费</span></a></li>
                        <li class="life-icon1"><a href="#"><i></i><span>话费</span></a></li>
                        <li class="life-icon1"><a href="#"><i></i><span>话费</span></a></li>
                        <li class="life-icon1"><a href="#"><i></i><span>话费</span></a></li>
                        <li class="life-icon1"><a href="#"><i></i><span>话费</span></a></li>
                        <li class="life-icon1"><a href="#"><i></i><span>话费</span></a></li>
                        <li class="life-icon1"><a href="#"><i></i><span>话费</span></a></li>
                    </ul>
                    <script>
                        //找到所有的i
                        var iis = document.getElementById("iconsprite").getElementsByTagName("i");
                        for(var i = 1; i< iis.length ; i++){
                            iis[i].style.backgroundPosition = "0"+(i*-25)+"px";
                        }
                    </script>
                </div>
            </div>
        </div>
    </div>

    <!--页面底部-->
<div class="jd-footer">
    <!--服务模块-->
    <div class="service">
        <div class="slogen">
            <span class="item slogen1">
                <img src="images/slogen1.png" alt="">
            </span>
            <span class="item slogen2">
                <img src="images/slogen2.png" alt="">
            </span>
            <span class="item  slogen3">
                <img src="images/slogen3.png" alt="">
            </span>
            <span class="item slogen4">
                <img src="images/slogen4.png" alt="">
            </span>
        </div>

         <!--dl部分-->
        <div class="w  clearfix">
            <dl>
                <dt>购物指南</dt>
                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">会员介绍</a></dd>
                <dd><a href="#">生活旅行/团购</a></dd>
                <dd><a href="#">常见问题</a></dd>
                <dd><a href="#">大家电</a></dd>
                <dd><a href="#">联系客服</a></dd>
            </dl>
            <dl>
                <dt>购物指南</dt>
                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">会员介绍</a></dd>
                <dd><a href="#">生活旅行/团购</a></dd>
                <dd><a href="#">常见问题</a></dd>
                <dd><a href="#">大家电</a></dd>
                <dd><a href="#">联系客服</a></dd>
            </dl>
            <dl>
                <dt>购物指南</dt>
                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">会员介绍</a></dd>
                <dd><a href="#">生活旅行/团购</a></dd>
                <dd><a href="#">常见问题</a></dd>
                <dd><a href="#">大家电</a></dd>
                <dd><a href="#">联系客服</a></dd>
            </dl>
            <dl>
                <dt>购物指南</dt>
                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">会员介绍</a></dd>
                <dd><a href="#">生活旅行/团购</a></dd>
                <dd><a href="#">常见问题</a></dd>
                <dd><a href="#">大家电</a></dd>
                <dd><a href="#">联系客服</a></dd>
            </dl>
            <dl>
                <dt>购物指南</dt>
                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">会员介绍</a></dd>
                <dd><a href="#">生活旅行/团购</a></dd>
                <dd><a href="#">常见问题</a></dd>
                <dd><a href="#">大家电</a></dd>
                <dd><a href="#">联系客服</a></dd>
            </dl>
            <dl>
                <div class="coverage">
                    <div class="dt">京东自营覆盖区县</div>
                    <div class="dd"><p>京东已向全国2649个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p>
                        <p class="lookmore"><a href="#"> 查看详情 ></a></p>
                    </div>
                </div>
            </dl>
        </div>
    </div>
    <!--最底部模块-->
    <div class="w againw">
        <div class="links">
            <a href="#">关于我们</a>|
            <a href="#">联系我们</a>|
            <a href="#">联系客服</a>|
            <a href="#">商家入驻</a>|
            <a href="#">营销中心</a>|
            <a href="#">手机京东</a>|
            <a href="#">友情链接</a>|
            <a href="#">销售联盟</a>|
            <a href="#">京东社区</a>|
            <a href="#">京东公益</a>|
            <a href="#">English Site</a>|
            <a href="#">Contact Us</a>
        </div>
        <div class="copyright">
        京公网安备 11000002000088号  |
            京ICP证070359号  |
            互联网药品信息服务资格证编号(京)-经营性-2014-0008  |
            新出发京零 字第大120007号<br/>
            互联网出版许可证编号新出网证(京)字150号  |  出版物经营许可证  |  网络文化经营许可证京网文[2014]2148-348号  |  违法和不良信息举报电话：4006561155<br/>
            Copyright © 2004 - 2016  京东JD.com 版权所有  |  消费者维权热线：4006067733<br/>
            京东旗下网站：京东钱包
        </div>
        <div class="message">
            <a href="#"><img src="images/mess.png" alt=""></a>
            <a href="#"><img src="images/mess2.png" alt=""></a>
            <a href="#"><img src="images/mess3.png" alt=""></a>
            <a href="#"><img src="images/mess4.png" alt=""></a>
            <a href="#"><img src="images/mess5.png" alt=""></a>
        </div>
    </div>
</div>
</body>
</html>